<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>翻转菜单练习</title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			.nav{
				width: 400px;
				height: 40px;
				margin:  0 auto;
				margin-top: 100px;
				background-color:black;
				
			}
			.nav>li {
				list-style: none;
				float: left;
				width: 120px;
				height: 40px;
				background-color: green;
				margin-left: 10px;
				text-align: center;
				line-height: 40px;
				/*父级设为相对定位 元素  定位 0 0*/
				position: relative;
			}
			/*目的定位元素盖住标准流元素（子绝父相）*/
			/*子级设为绝对定位？？？此处可以省略*/
		/*	.sub{
				position: absolute;
				width: 120px;
				left: 0;
				top:40px;
				
			}*/
			/*默认隐藏菜单
			.sub{
				display: none;
			}
			鼠标移入显示
			.nav>li:hover .sub{
				display: block;
			}
			这个方式会使得旋转效果无效
			*/
			
			
			
			/*默认旋转方式*/
			.sub>li{
				list-style: none;
				background-color: pink;
				transform: rotateY(180deg);
				transition: 1s;
				/*元素透明度0隐藏*/
				opacity: 0;
				
			}
			/*鼠标移入清除*/
			.nav>li:hover .sub li{
				transform: none;
				/*显示*/
				opacity: 1;
			}
			/*鼠标移入延迟*/
			.nav>li:hover .sub li:nth-child(1){
				transition-delay: 0ms;
			}
			.nav>li:hover .sub li:nth-child(2){
				transition-delay: 220ms;
			}
			.nav>li:hover .sub li:nth-child(3){
				transition-delay: 440ms;
			}
			.nav>li:hover .sub li:nth-child(4){
				transition-delay: 660ms;
			}
			.nav>li:hover .sub li:nth-child(5){
				transition-delay: 880ms;
			}
			/*默认不延迟*/
			.nav>li .sub li:nth-child(5){
				transition-delay: 0ms;
			}
			.nav>li .sub li:nth-child(4){
				transition-delay: 200ms;
			}
			.nav>li .sub li:nth-child(3){
				transition-delay: 300ms;
			}
			.nav>li .sub li:nth-child(2){
				transition-delay: 400ms;
			}
			.nav>li .sub li:nth-child(1){
				transition-delay: 500ms;
			}
			div{
				width: 400px;
				height: 500px;
				margin: 0 auto ;
				background-color: deepskyblue;
			}
		</style>
	</head>
	<body>
		<ul class="nav">
			<li>一级菜单1
			<ul class="sub">
				<li>二级菜单1</li>
				<li>二级菜单2</li>
				<li>二级菜单3</li>
				<li>二级菜单4</li>
				<li>二级菜单5</li>
			</ul>
			</li>
			<li>一级菜单2
			<ul class="sub">
				<li>二级菜单</li>
				<li>二级菜单</li>
				<li>二级菜单</li>
				<li>二级菜单</li>
				<li>二级菜单</li>
			</ul>
			</li>
			<li>一级菜单3
			<ul class="sub">
				<li>二级菜单</li>
				<li>二级菜单</li>
				<li>二级菜单</li>
				<li>二级菜单</li>
				<li>二级菜单</li>
			</ul>
			</li>
		</ul>
		<div>
		语法
transform: none|transform-functions;	
值	描述	测试
none	定义不进行转换。	测试
matrix(n,n,n,n,n,n)	定义 2D 转换，使用六个值的矩阵。	测试
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)	定义 3D 转换，使用 16 个值的 4x4 矩阵。	
translate(x,y)	定义 2D 转换。	测试
translate3d(x,y,z)	定义 3D 转换。	
translateX(x)	定义转换，只是用 X 轴的值。	测试
translateY(y)	定义转换，只是用 Y 轴的值。	测试
translateZ(z)	定义 3D 转换，只是用 Z 轴的值。	
scale(x,y)	定义 2D 缩放转换。	测试
scale3d(x,y,z)	定义 3D 缩放转换。	
scaleX(x)	通过设置 X 轴的值来定义缩放转换。	测试
scaleY(y)	通过设置 Y 轴的值来定义缩放转换。	测试
scaleZ(z)	通过设置 Z 轴的值来定义 3D 缩放转换。	
rotate(angle)	定义 2D 旋转，在参数中规定角度。	测试
rotate3d(x,y,z,angle)	定义 3D 旋转。	
rotateX(angle)	定义沿着 X 轴的 3D 旋转。	测试
rotateY(angle)	定义沿着 Y 轴的 3D 旋转。	测试
rotateZ(angle)	定义沿着 Z 轴的 3D 旋转。	测试
skew(x-angle,y-angle)	定义沿着 X 和 Y 轴的 2D 倾斜转换。	测试
skewX(angle)	定义沿着 X 轴的 2D 倾斜转换。	测试
skewY(angle)	定义沿着 Y 轴的 2D 倾斜转换。	测试
perspective(n)	为 3D 转换元素定义透视视图。
			
			
		</div>
	</body>
</html>
